<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}"
			collection="opendb-contacts,opendb-nation-china,opendb-city-china"
			field="username,gender,mobile,email,comment,nationchina{name},citychina{name}" orderby="asc">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				
				<uni-table border stripe emptyText="暂无更多数据" >
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th align="center">操作</uni-th>
						<uni-th align="center">图片</uni-th>
				        <uni-th align="center">姓名</uni-th>
				        <uni-th align="left">性别</uni-th>
						<uni-th align="left">电话</uni-th>
						<uni-th align="left">邮箱</uni-th>
						<uni-th align="left">备注</uni-th>
						<uni-th align="left">民族</uni-th>
						<uni-th align="left">地址</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item, index) in data" :key="index"
						 >
				        <uni-td>
							<view @click="handleItemClick(item._id)" style="color: #007AFF;">修改</view>
						</uni-td>
						<uni-td><image style="width: 60upx;height: 60upx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" mode=""></image></uni-td>
				        <uni-td>{{item.username}}</uni-td>
				        <uni-td>{{item.gender}}</uni-td>
						 <uni-td>{{item.mobile}}</uni-td>
						  <uni-td>{{item.email}}</uni-td>
						   <uni-td>{{item.comment}}</uni-td>
						   <uni-td>{{item.citychina[0].name}}</uni-td>
						   <uni-td>{{item.nationchina.length>0 ?  item.nationchina[0].name : ""}}</uni-td>
						   
				    </uni-tr>
				    
				
				</uni-table>
				
				<!-- <uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
						@click="handleItemClick(item._id)">
						<view slot="body">
							<uni-list-chat :title="item.username" 
							avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" 
							:note="item.mobile" 
							time="2020-02-02 20:20" 
							></uni-list-chat>
						</view>
					</uni-list-item>      
				</uni-list> -->
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onShow() {
			console.log("onShow")
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			handleItemClick(id) {
				console.log(id)
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}

		}
	}
</script>

<style>
</style>
